import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import Navbar from '../component/Navbar';
import './style/hangQing.css'

const tabBarData = [
    { title: '国际期货', key: 0 },
    { title: '国内期货', key: 1 },
    { title: '股指期货', key: 2 },
    { title: '货币期货', key: 3 },
]

class HangQing extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabIndex: 0,
            guojiData: [],
            rightText: '去模拟',
            type: true,
        }
    }

    selectTab = (v) => {
        if (v === this.state.tabIndex) {
            return;
        }
        this.setState({
            tabIndex: v
        });
    }
    componentDidMount() {
        this.data = [
            { type1: 'shipan', type2: 'jianyizhong', title: '恒指2004', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '-0.72%', 'time': '00:00-00:11' },
            { type1: 'shipan', type2: 'jianyizhong', title: '德国DAX', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '+0.43%', 'time': '00:00-00:11' },
            { type1: 'shipan', type2: 'jianyizhong', title: '恒指2004', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '-0.72%', 'time': '00:00-00:11' },
            { type1: 'shipan', type2: 'xiushi', title: '恒指2004', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '-0.72%', 'time': '00:00-00:11' },
            { type1: 'shipan', type2: 'xiushi', title: '小道指', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '-0.72%', 'time': '00:00-00:11' },
            { type1: 'shipan', type2: 'jianyizhong', title: '小道指', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '-0.72%', 'time': '00:00-00:11' },
            { type1: 'shipan', type2: 'jianyizhong', title: '恒指2004', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '-0.72%', 'time': '00:00-00:11' },
            { type1: 'shipan', type2: 'jianyizhong', title: '恒指2004', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '-0.72%', 'time': '00:00-00:11' },
            { type1: 'shipan', type2: 'jianyizhong', title: '恒指2004', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '+0.43%', 'time': '00:00-00:11' },
            { type1: 'shipan', type2: 'jianyizhong', title: '恒指2004', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '-0.72%', 'time': '00:00-00:11' },
        ];
        this.data2 = [
            { type1: 'moni', type2: 'jianyizhong', title: '恒指2004', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '-0.72%', 'time': '00:00-00:11' },
            { type1: 'moni', type2: 'jianyizhong', title: '德国DAX', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '+0.43%', 'time': '00:00-00:11' },
            { type1: 'moni', type2: 'jianyizhong', title: '恒指2004', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '-0.72%', 'time': '00:00-00:11' },
            { type1: 'moni', type2: 'xiushi', title: '恒指2004', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '-0.72%', 'time': '00:00-00:11' },
            { type1: 'moni', type2: 'xiushi', title: '小道指', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '-0.72%', 'time': '00:00-00:11' },
            { type1: 'moni', type2: 'jianyizhong', title: '小道指', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '-0.72%', 'time': '00:00-00:11' },
            { type1: 'moni', type2: 'jianyizhong', title: '恒指2004', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '-0.72%', 'time': '00:00-00:11' },
            { type1: 'moni', type2: 'jianyizhong', title: '恒指2004', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '-0.72%', 'time': '00:00-00:11' },
            { type1: 'moni', type2: 'jianyizhong', title: '恒指2004', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '+0.43%', 'time': '00:00-00:11' },
            { type1: 'moni', type2: 'jianyizhong', title: '恒指2004', detaile: '手续费:100元/手', jiange: '19.72', zhangdiefu: '-0.72%', 'time': '00:00-00:11' },
        ];
        this.setState({
            guojiData: this.data
        })
    }


    switch = () => {

        this.setState({
            rightText: this.state.type ? '去实盘' : '去模拟',
            type: !this.state.type,
            guojiData: this.state.type ? this.data2 : this.data
        })
    }

    goShiPanJiaoYi = (v) => {
        this.props.history.push({ pathname: '/shipanjiaoyi', query: { data: v,type:this.state.type } })
    }

    render() {
        const { tabIndex } = this.state
        return (
            <div className='hangqing'>
                <Navbar showArrow={true} title='行情' rightText={this.state.rightText} rightTextClick={this.switch}></Navbar>
                <div className='hangqingScroll' >
                    <div className='hangqingScrollTabBar'>
                        <div className='hangqingScrollTabBarTop'>
                            {
                                tabBarData && tabBarData.map((v, k) => {
                                    let select = '';
                                    if (v.key === this.state.tabIndex) {
                                        select = 'select'
                                    }
                                    return (
                                        <div key={v + k} onClick={() => this.selectTab(v.key)} className={`${select}hangqingScrollTabBarTopItem`}>
                                            {v.title}
                                        </div>
                                    )
                                })
                            }
                        </div>
                        <div className='hangqingScrollTabBarBottom'>
                            <span>品种名称</span>
                            <span style={{ justifyContent: 'center' }}>当前价格</span>
                            <span style={{ justifyContent: 'flex-end' }}>涨跌幅</span>
                        </div>
                    </div>
                    <div className="newClass">
                        {/* style={{ transform: `translateX(-${this.state.tabIndex / 4 * 100}%)` }} */}
                        <div className='hangqing-tab' >
                            <div className='hangqingScrollContent' key='0'>
                                {
                                    this.state.guojiData && this.state.guojiData.map((v, k) => {
                                        const add = v.zhangdiefu.indexOf('-') > -1 ? 'add' : '';
                                        const type1 = v.type1 === 'shipan' ? 'shipan' : null;
                                        const type2 = v.type2 === 'xiushi' ? true : false;

                                        return (<div key={v + k} className='hangqingScrollContentItem' onClick={() => this.goShiPanJiaoYi(v)}>
                                            <div className='hangqingScrollContentItemTop'>
                                                <span className={`hangqingScrollContentItemTopSpan1`}>{v.title}---{tabIndex}</span>
                                                <span className={`${add}hangqingScrollContentItemTopSpan2`}>{v.jiange}</span>
                                                <span className={`${add}hangqingScrollContentItemTopSpan3`}>{v.zhangdiefu}</span>
                                            </div>
                                            <div className="hangqingScrollContentItemBottom">
                                                <div className='hangqingScrollContentItemBottomLeft'>
                                                    {type2 ? <span className='hangqingScrollContentItemBottomLeftSpan1' style={{ background: 'rgba(153,153,153,0.15)', color: 'rgba(153,153,153,1)' }}>休市</span> : <span className='hangqingScrollContentItemBottomLeftSpan1'>交易中</span>}
                                                    {!type2 ? type1 ? <span className='hangqingScrollContentItemBottomLeftSpan2' style={{ background: 'rgba(249,135,67,0.15)', color: 'rgba(249,135,67,1)' }}>实盘</span> : <span className='hangqingScrollContentItemBottomLeftSpan2'>模拟</span> : null}
                                                </div>
                                                <span className='hangqingScrollContentItemBottomSpan1'>{v.detaile}</span>
                                                <span className='hangqingScrollContentItemBottomSpan2'>{v.time}</span>
                                            </div>
                                        </div>)
                                    })
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default withRouter(HangQing); 